<template>
  <div>
  <div class="block">
    <span class="demonstration" style="margin-right: 10px">筛选</span>
    <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
    <el-button type="primary" style="margin-left: 10px" @click="bytime">查询</el-button>
  </div>
  <div class="about">

    <table>
      <tr>
        <th>序号</th>
        <th>消费名称</th>
        <th>消费金额</th>


      </tr>
      <tr v-for="l in paginatedData" :key="l.info_id">
        <td>{{l.infoId}}</td>
        <td>{{ l.name }}</td>
        <td>{{ l.money }}元</td>

      </tr>

    </table>
    <el-pagination
        background
        layout="total, prev, pager, next"
        :total="totalItems"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>


<script>
import axios from "axios";
let url = 'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/findPage?page=1&size=10'
export default {
data(){
  return{
    list :[],
    currentPage: 1, // 当前页数
    pageSize: 3, // 每页显示的条目数量
    totalItems: 0, // 数据总条数

    value1: '',
    value2: ''

  }

},
mounted() {
  axios.get(url).then(res => {
    let result = res.data;
    this.list = result.data;
    this.totalItems = result.recordsTotal;
    console.log(result)

  })

},
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    bytime(){
      const param = {
        'startTime' : this.value1,
        'endTime': this.value2
      }
      let url1 = 'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/findByTime'
      axios.get(url1,param).then(res => {
        let result = res.data;

        console.log(result)

      })

    }

  },
}
</script>
<style>
table{
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc; /* 添加边框 */
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 可选：给表头添加背景色 */
}
</style>